<script setup>
import { computed } from "vue";
const props = defineProps({
  index: {
    type: Number,
    default: 1,
  },
  music: {
    type: Object,
  },
  privilege: {
    type: Object,
    default: () => {
      return {
        flLevel: false,
      };
    },
  },
});

const emits = defineEmits(["play"]);

const isVip = computed(() => props.privilege.flLevel === "none");

const playMusic = () => {
  const params = {
    index: props.index,
    id: props.music.id,
  };
  emits("play", params);
};
</script>

<template>
  <view class="lght-music-card-warp" @tap="playMusic">
    <view class="lght-music-card" v-if="props.music?.name">
      <view class="music-info-wrap">
        <view class="index-wrap">{{ index + 1 }}</view>
        <view class="music-info">
          <view class="music-name ellipsis">{{ music.name }}</view>
          <view class="music-author-wrap">
            <view class="privilege" v-show="isVip">vip</view>
            <view class="music-author ellipsis">
              <template v-for="item in props.music.ar" :key="item.name">
                {{ item.name }} - {{ music.al.name || "" }}
              </template>
            </view>
          </view>
        </view>
      </view>
      <view class="more-wrap">
        <i class="iconfont icon-gengduo1"></i>
      </view>
    </view>
    <!-- 骨架屏 -->
    <view class="lght-music-card" v-else>
      <view class="music-info-wrap">
        <view class="index-wrap skeleton-color"></view>
        <view class="music-info">
          <view class="music-name ellipsis skeleton-color"></view>
          <view class="music-author-wrap  skeleton-color">
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.lght-music-card-warp {
  margin: 30rpx 0;
  padding: 0px 30rpx;
  .skeleton-color {
    background-color: rgb(237, 237, 237);
    border-radius: 6rpx;
  }
  .lght-music-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .music-info-wrap {
      display: flex;
      align-items: center;
      .index-wrap {
        color: $assistText;
        font-size: 30rpx;
        height: 100rpx;
        line-height: 100rpx;
        width: 50rpx;
        text-align: left;
      }
      .music-info {
        margin-left: 10rpx;
        .music-name {
          width: 590rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-size: 32rpx;
          font-weight: 500;
        }
        .music-author-wrap {
          margin-top: 10rpx;
          height: 30rpx;
          line-height: 30rpx;
          display: flex;
          align-items: center;
          .privilege {
            height: 22rpx;
            line-height: 22rpx;
            width: 38rpx;
            border: $primaryColor 1px solid;
            border-radius: 6rpx;
            font-size: 20rpx;
            text-align: center;
            color: $primaryColor;
            margin-right: 10rpx;
          }
          .music-author {
            width: 540rpx;
            font-size: 26rpx;
            color: $assistText;
          }
        }
      }
    }
    .more-wrap {
      width: 40rpx;
      text-align: right;
      color: $assistText;
      .icon-gengduo1 {
        margin-right: -12rpx;
        font-size: 36rpx;
      }
    }
  }

  .ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
